<template>
  <div class="container">
    <scroller ref="scroller-detail" :showRefresh="false" @refresh="onrefresh">
      <div class="main">
        <div style="justify-content:center">
            <slider class="slider size" auto-play="true">
              <div v-for="src in posters">
                <image class="size" resize="cover" :src="src"></image>
              </div>
              <indicator class="indicator"></indicator>
            </slider>
        </div>
        <div class="info">
          <text class="title">{{bean.s_name}}</text>
          <text style="font-size:28">{{bean.s_addr}}</text>
          <text>剩{{bean.qiangLeft}}抢额</text>
        </div>
        <div class="info">
          <div @click="onDetail">
            <text class="title">商家详细</text>
            <am-icon type="right" size="sm" style="position:absolute;right:16px;top:10px"  />
          </div>
          <text style="font-size:28;margin-top:16px">{{bean.details}}</text>
        </div>
        <div class="info">
          <text class="title">活动说明</text>
          <text style="font-size:28;margin-top:16px">{{bean.s_intr}}</text>
        </div>
      </div>
    </scroller>
  </div>
</template>
<script>
    var globalEvent = weex.requireModule('globalEvent');
    import { AmIcon  } from 'weex-amui'
    module.exports = {
        data() {
          return {
            shopid:0,
            posters:[],
            detail:'',
            bean:{
              s_name:'',
              s_phone:'',
              s_addr:'',
              qiangLeft:'',
              qiangAll:'',
              details:'',
              s_intr:''
            }
          }
        },
        components: {
          AmIcon
        },
        methods: {
            onrefresh() {
              this.$refs["scroller-detail"].refreshEnd()
            },
            loadData() {
              this.$notice.loading.show("请等待");
              this.$fetch({
                method: 'GET',
                url: 'https://888.ph100.cn/api/shopDetail',
                data: {
                  shopid:this.shopid
                }
              }).then(resData => {
                // 成功回调
                console.log(resData);
                this.$notice.loading.hide();
                this.posters = resData["pic"];
                this.bean = resData["shopInfo"];

                this.detail = this.bean.details

                var dd=this.bean.details.replace(/<\/?.+?>/g,"");
                var dds=dd.replace(/&nbsp;/ig,'');
                this.bean.details = dds;


                var di=this.bean.s_intr.replace(/<\/?.+?>/g,"");
                var dis=di.replace(/&nbsp;/ig,'');
                this.bean.s_intr = dis;

              }, error => {
                // 错误回调
                console.log(error);
                this.$notice.loading.hide();
              })
            },
            onDetail() {
              this.$router.open({
                  name: 'web',
                  type: 'PUSH',
                  params: {
                    html:this.detail
                  }
              })
            }
        },
        created: function() {
          this.$router.getParams().then(resData => {
              console.log(resData)
              this.shopid = resData.shopid

              this.loadData();
          });
        }
    }
</script>
<style scoped>
.size {
  width: 750px;
  height: 320px;
}
.slider {
  position: relative;
}
.indicator {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  background-color: rgba(0, 0, 0, 0.3);

  itemColor: #DDDDDD;
  itemSelectedColor: rgb(0, 180, 255);
}
.info{
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 16px;
  background-color: #ffffff;
}
.title{
  font-size: 40;
  padding-top: 10px;
  padding-bottom: 10px;
  border-width: 1px;
  border-color: #eeeeee;
}
</style>
